Display:
The display CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. The display property sets an element's inner and outer display types. The outer type sets an element's participation in flow layout; the inner type sets the layout of children.
Consider this heading
Say we want to center it, but a simple margin: auto doesn't work even though, it works on the heading below.
Consider this heading
This is because, the first heading takes up all the available horizontal space, and the later one is set to width: fit-content
#test-1 {
margin:auto;
}
#test-2 {
margin:auto;
width: fit-content;
}
Outer Display Types:
These keywords specify the element's outer display type, which is essentially its role in flow layout:
block:
The element generates a block box, generating line breaks both before and after the element when in the normal flow.
inline:
The element generates one or more inline boxes that do not generate line breaks before or after themselves. In normal flow, the next element will be on the same line if there is space.
inline-block:
This is the same as inline but you can set width and height of the elements.
Look into this more here
Inner Display Types:
This is still beyond me at this point, we will get into this later.
#inline {
display: inline;
width: 20%; /*❌ doesn't work*/
height: 250px; /*❌ doesn't work*/
margin: auto; /*❌ doesn't work*/
}
#block {
display: block;
width: 20%;
height: 250px;
margin: auto;
}
#inline-block {
display: inline-block;
width: 20%;
height: 250px;
margin: auto; /*❌ doesn't work*/
}
Note: an inline element cannot contain a block element. Look here. Use inline-block
Even if you set the width of a block element to be less than 100%, it will still occuoy the full line. If you want multiple block elements in the same flow as an inline element would be, use inline-block.
Center multiple inline-block elements by putting them in a sepearate block container and using width: *; margin: auto;. Naturally, you can't expect them to be in normal flow and be centered. Not the best way, but a way.
Position:
The position property in CSS can have the following values:
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
By default, all positions are set to static. In static position, The element is positioned according to the normal flow of the document. The top, right, bottom, left, and z-index properties have no effect.
Relative Positioning:
A relatively positioned element is an element whose computed position value is relative to its original position. The top and bottom properties specify the vertical offset from its normal position; the left and right properties specify the horizontal offset. When both the right CSS property and the left CSS property are defined, the position of the element is overspecified. In that case, the left value has precedence when the container is left-to-right. The case is similar for the top, and bottom properties. The element is positioned according to the normal flow of the document, and the offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.
Absolute Positioning:
An absolutely positioned element is an element whose computed position value is relative to its closest positioned ancestor, if any; otherwise, it is placed relative to the initial containing block. The top and bottom properties specify.The element is removed from the normal document flow, and no space is created for the element in the page layout. If the element has margins, they are added to the offset.
A positioned element is an element whose computed position value is anything except static.
Fixed Positioning:
A fixed positioned element is an element whose computed position value is relative to the initial containing block (the one made by the viewport. The body.). There are some exceptions. See the documentation. The element is removed from the normal document flow, and no space is created for the element in the page layout. If the element has margins, they are added to the offset. In printed documents, the element is placed in the same position on every page.
Sticky Positioning:
This is rather confusing. It is positioned according to the normal flow of the document. That is, it will in the order with its sibling elements. However, it is positioned/offset relative to its nearest scrolling ancestor and containing block. It's treated as relatively positioned until its containing block crosses a specified threshold, at which point it is treated as "stuck" until meeting the opposite edge of its containing block. Note that a sticky element can never get out of its container.
Playground
My position is relative too.
#box1 {
position: relative;
top: 30px;
left: 40px;
}
#box2 {
position: absolute;
top: 300px;
left: 200px;
}
#box3 {
position: fixed;
bottom: 10px;
right: 10px;
height: 60px;
}
#box4 {
position: sticky;
top: 50px;
}